body{
    padding: 0;
    margin: 0;
    position: relative;
    cursor: pointer;


   header{
    background-color: rgba(19, 18, 18,0.65);
   
    height: 64PX;
    display: flex;
    .logo{ 
        flex-grow: 1;
        flex-wrap: nowrap;
        z-index: 1;
        display: flex;
        height: 65px;
        img{
           margin: auto;
            &:hover{
                animation: rotate 1.0s infinite linear;
            }
           
        }
    
       }
    #head-nav{
        flex-grow: 5;
        display: flex;
  
        ul{
            // background-color:turquoise;
            flex-grow: 8;
            padding: 0;
            margin: 0;
            list-style: none;
            height: 100%;
            // display: flex;
            li{ 
                line-height: 65px;
                width: 18%;
                text-align: center;
                float: right;
                color: snow;
                &:hover{
                    color: coral;
                }
            }
        }
        .manger{
            flex-grow: 1;
            
            display: flex;
            // background-color: yellowgreen;
            
            button{
                
                
                width: 80px;
                height: 40px;
                border-radius: 10px;
                margin: 12.5px auto;
                
                
            } 

        }

        
    
    }
    img{
        top: 0px;
        z-index: -1;
        display: block;
        position: absolute;
    }



   }
   

   //头部导航栏完成

//-------------------------------------------------------------------

.search{
    width: 650px;
    height: 150px;
    border-radius: 20px;
    background-color:white;
    margin:350px auto;
    display: flex;
    box-shadow: 2px 1px 5px #ccc;
   .school-input{
        width: 30%;
        height: 100%;
        vertical-align: middle;
        // background-color: blueviolet;
        border-radius: 20px;
       
        p{
            margin-bottom: 0px;
            padding: 10px;
        }
        input{
            width: 80%;
            height: 15%;
            border-radius: 10px;
            margin-left:10px ;
            border:2px solid cadetblue;
            background-color: rgb(245, 240, 240);
            outline: none ;
           
       }
    }
   .btn{
     width: 14%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
    button{
        width: 100%;
        height: 20%;
        margin-top: -9px;
        margin-right: 9px;
        border-radius: 8px;
        background-color: #00BFFF;
        border: none ;
        color: snow;
        
        
    }
   }
  
 
    
   
}
//-----------------------------------------------------------------


   //article 部分
   article{
       width: 80%;
    //    background-color: cadetblue;
    //    display: flex;
       margin: 0 auto;
    //    height: auto;
       //第一个div用来放标签
       .title{
           margin-top: 100px;
               background-color: aliceblue;
          p{  
            font-size: 20px;
            font-weight: 600;
        }
        }
        //第二个盒子用来放卡片
        #box{
            
            // border: 2px solid gray;
            display:inline-flex;
            justify-content: space-between;
            align-items: center;
            .cards1{
                // border: 2px solid gray;
                margin: 5px;
                p{
                font-size: 12px;
                font-weight: 450;
                margin: 5px;
            }
                flex-grow: 1;
                width: 25%;
                display: inline-block;
                img{
                    height: 100%;
                    width: 100%;
                }
                
            }
            .cards2{
                // border: 2px solid gray;
                margin: 5px;
                p{
                font-size: 12px;
                font-weight: 450;
                margin: 5px;
            }
                flex-grow: 1;
                width: 25%;
                display: inline-block;
                img{
                    height: 100%;
                    width: 100%;
                }
                
            }
            .cards3{
                // border: 2px solid gray;
                margin: 5px;
                p{
                font-size: 12px;
                font-weight: 450;
                margin: 5px;
            }
                flex-grow: 1;
                width: 25%;
                display: inline-block;
                img{
                    height: 100%;
                    width: 100%;
                }
                
            }
            .cards4{
                // border: 2px solid gray;
                margin: 5px;
                p{
                font-size: 12px;
                font-weight: 450;
                margin: 5px;
            }
                flex-grow: 1;
                width: 25%;
                display: inline-block;
                img{
                    height: 100%;
                    width: 100%;
                }
                
            }
        }

        //article 小肚皮部分
          #contain{
              margin-top: 100px;
              p{  font-size: 20px;
                  font-weight: 600;
                  text-align: center;
              }
              .div{
                  color: greenyellow;
              }
          }


        .tab {

            width: 100%;
            height: 40px;
           span {
            /* span是行内敛元素，变成行内块级元素才能改变宽高 */
            display: inline-block;
            width:14%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            float:right;
            color: #ccc;
        
        }
    }

        .bgc {
            border-bottom: 5px solid gray;
            color: black;

            &:hover{
              font-size: 20px;
            }
            &:active{
               font-size: 20px;

            }

        
        }


      .cont {
        height: auto ;
        width: 100%;
        div {
            height: 600px;
            width: 100%;
            // border: 1px solid gray;
            display: none;
            font-size: 16px;
            line-height: 30px;
            margin-top: 50px;
         
        
        }
        .show{
            width: 100%;
            margin-top: 30px;
            display: flex;
            img{
                width: 20%;
               height: 30%;
            }
            ul{
                width: 80%;
                padding: 0;
                margin: 0;
                list-style: none;
                .title{
                    font-size: 20px;
                    font-weight: 800;
                    margin: 10px;

                }
               
            }
          
          
        }
     
 
  



      } 
    
  

       .show {
        display:inline-block;
   
    }

 

    
   

        

      
       
    
     
   

   






 

   }
   aside{
    position: fixed;
    top: 160px; ;
    right:0px ;
    width: 170px;
    height: 416px;
    // background-color: cadetblue;
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        &:hover li{
            left: 0px;
            font-size: 18px;
            font-weight: 500;
            
            img{
                // -webkit-transform: scale(1.5);
                animation: rotate 0.75s infinite linear;
               

            }
       
        }
      
            @for $i from 1 through 14{
                li{
                    position: relative;/*相对定位*/
                    left: 100px; /*自身原来的位置*/
                    width: 100%;
                    height: 30px;
                    background-color: rgba(29, 143, 163,0.7);
                    border-top: 2px solid transparent;
                    transition: all 1s;
                    margin-top: 5px;
                    color: white;
                    .fengche-up{
                        background-color:none;
                        position: absolute;
                        img{
                            margin-top: -20px;
                            animation: rotate 3s infinite linear;
                            
                        }
                    }
                &:nth-child(#{$i}) {
                   
                    transition-delay: 0.1s * $i;
                }

            }
           
           
           
            
        }
         .fengche-up{
            background-color: transparent;
        }
        .fengche-down{
            background-color: transparent;
        }

   
        
    }
 }


 //三个小圆图标部分
 footer{
    width: 80%;
    margin: 50px  auto;
    height: 200px;
    background-color: #cccc;
    line-height: 200px;
     display: flex;

     .foot-left{
         height: 100%;
         width: 40%;
        //  background-color: rgba(43, 108, 168, 0.8);
         margin:auto 0;
         line-height: 200px;
         display: flex;
         justify-content: center;
         align-items: center;
         .cricle1{
             width: 50px;
             height: 50px;
             border-radius: 25px;
             
             margin: 5px;
            position: relative;
             img{
                
                 padding: 0;
                 margin: 0;
                 display: inline-block;
                 position: absolute;
                //  text-align:center;
                //  color: snow;
                 top: 0px;
                 
               
               
                 
             }
            
         }
         .cricle2{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            // background-color: black;
            margin: 5px;
            position: relative;
            img{
                
                padding: 0;
                margin: 0;
                display: inline-block;
                position: absolute;
               //  text-align:center;
                color: snow;
                top: 0px;
                
              
              
                
            }
           
        }
        .cricle3{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            // background-color: black;
            margin: 5px;
            position: relative;
            img{
                
                padding: 0;
                margin: 0;
                display: inline-block;
                position: absolute;
               //  text-align:center;
                color: snow;
                top: 0px;
                
              
              
                
            }
           
           
        }
     }

 //link部分

 .foot-right1{
    width: 33.3%;
    // background-color: brown;
    height: 200px;
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
        height: 100%;
        li{ 
            height: 10%;
            font-size: 10px;
            line-height: 50px;
            text-align: center;
        }
        .big{
            font-size: 20px;
            margin-bottom: 10px;
        }
    }
}
.foot-right2{
   width: 33.3%;
//    background-color: rgb(15, 211, 48);
   height: 200px;
   ul{
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
    li{ 
        height: 10%;
        font-size: 10px;
        line-height: 50px;
        text-align: center;
    }
    .big{
        font-size: 20px;
        margin-bottom: 10px;
    }
}
}

.foot-right3{
   width: 33.3%;
//    background-color: rgb(211, 26, 26);
   height: 200px;
   ul{
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
    li{ 
        height: 10%;
        font-size: 10px;
        line-height: 50px;
        text-align: center;
    }
    .big{
        font-size: 20px;
        margin-bottom: 10px;
    }
}
}


 }









 //滚动裕度
 .white{
     width: 100%;
     height: 100px;
 }





}